<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            body,
            html {
                  height: 100%;
            }

            .clip {
                  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594961298093&di=f3ba74a28dbf59f0c2a8edaee33e4652&imgtype=0&src=http%3A%2F%2Fimg.ui.cn%2Fdata%2Ffile%2F4%2F9%2F2%2F2108294.gif);
                  background-size: 100%;
                  background-position-y: 35%;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  z-index: 999;
                  top: 0;
                  left: 0;
                  display: none;
            }
      </style>
</head>

<body>
      <p>账号 :<input type="text" value="root"></p>
      <p>密码 :<input type="text" value="123456"></p>
      <p><button id="btn">登陆</button></p>

      <div class="clip">
            <h1>正在请求中请稍等</h1>
      </div>
      <div id="ff"></div>
      <script src="./js/jquery.js"></script>
      <script>
            //定义全局的ajax事件
            //开始的时候让遮罩层显示
            $(document).ajaxStart(function () {
                  $(".clip").show()
            })
            $(document).ajaxComplete(function () {
                  $(".clip").hide()
            })
            //绑定事件
            $("#btn").click(function () {
                  console.log(33);
                  $.ajax({
                        url: "./03_langtime.php",
                  })
            })
      </script>

</body>

</html>